<template>
  <div class="page machines-manage">
    <StoreChoice
      ref="StoreChoice"
      :current="[]"
      :multipleChoice="false"
      :hasTotal="true"
      v-on:listenToStoreSelect="getSelectStoreValue"
      v-if="role === '1'"
    />
    <machinesDetailPopup
      v-if="detailPopup.popupVisible"
      :infoTitle="detailPopup.infoTitle"
      :machinesInfo="detailPopup.machinesInfo"
      v-on:listenToMachinesDetailPopupHide="popupHide"
    />
    <div class="scroll-view">
      <customHeader
        middleTitle="机具管理"
        v-if="role!==''&&role == '1'"
        @rightCallBack="rightCallBack"
        @leftCallBack="handleBack"
      >
        <i class="filter-icon zhk-nav_filter" :class="{blue:mtSearchParam.shopId}"></i>
      </customHeader>
      <customHeader middleTitle="机具管理" v-if="role ==''||role !=='1'" @leftCallBack="handleBack" />
      <div class="page-body">
        <div class="section" ref="wrapper" :style="{ height:'100%' }">
          <no-data msg="暂无数据" v-if="list.length==0"></no-data>
          <ul
            class="machines-list"
            v-infinite-scroll="loadMore"
            infinite-scroll-disabled="loading"
            infinite-scroll-distance="30"
          >
            <li v-for="(item,index) in list" :key="index" @click="handleSelectMachines(item)">
              <img class="pic" :src="item.thumbnail" alt />
              <span class="info">
                <p class="name">{{item.machineToolName}}</p>
                <p class="state">
                  <span>机具状态：{{statusFormate(item.status)}}</span>
                </p>
                <p class="order-num">设备序列号：{{item.machineToolSn}}</p>
              </span>
            </li>
          </ul>
          <p v-show="loading" class="page-infinite-loading">
            <mt-spinner :style="{display:'inline-block'}" type="fading-circle"></mt-spinner>
          </p>
          <div v-show="noMore&&!loading&&role!==''&&list.length!==0" class="no-more">
            <span>已经全部加载完毕</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import config from "../../base/profile/config.json";
import jsBridge from "../../tools/jsBridge.js";
import { Toast } from "mint-ui";
import StoreChoice from "../../components/StoreChoice/StoreChoice";
import noData from "../../components/noData/noData";
import machinesDetailPopup from "../../components/machinesDetailPopup/machinesDetailPopup";
export default {
  name: "machinesManage",
  data() {
    return {
      detailPopup: {
        popupVisible: false,
        infoTitle: "机具详情",
        machinesInfo: {
          type: "",
          machineToolSn: "",
          shopName: "",
          orderId: "",
          logisticsName: "",
          logisticsCode: ""
        }
      },
      canSelectShop: true,
      loading: false,
      keywords: "",
      noMore: false,
      nextPage: null,
      list: [],
      role: "1",
      roleInfo:{},
      selfShopId: "",
      supplierId: "",
      mtSearchParam: {
        isInited: false,
        pageSize: 10,
        currentPage: 1,
        shopName: "全部门店",
        shopId: ""
      },
      deviceInfo: [],
    };
  },
  methods: {
    handleSelectMachines(item) {
      // if ((item.machineToolType == "17" || item.machineToolType == "18" || item.machineToolType == "20" || item.machineToolType == "32" || item.machineToolType == "21") && item["machineToolSn"] && item["status"] == 4) {
      const types = [17, 18, 20, 21, 32, 37, 38, 39, 40, 41, 42, 51, 53, 54, 55, 57, 58, 59, 60, 61];
      if (~types.indexOf(item.machineToolType) && item["machineToolSn"] && item["status"] == 4) {
        this.$router.push({
          path: "/qrCodeSound/mainSettings",
          query: { sn: item.machineToolSn,
                  type: item.machineToolType,
                  shopId: item.shopId,
                  shopName: item.shopName,
                  supplierId: this.supplierId,
                  deviceName: item.deviceName,
                  from: "machinesManage" }
        });
      } else {
        this.checkMachines(item);
        this.popupShow();
      }
    },
    checkMachines(data) {
      data.type = CommonUtil.getMachineNameByType(data.machineToolType)
      this.detailPopup.machinesInfo = data;
    },
    popupShow() {
      this.detailPopup.popupVisible = true;
    },
    machineName(item) {
      item.deviceName = CommonUtil.getMachineNameByType(item.machineToolType);
      return item.deviceName;
    },
    popupHide() {
      this.detailPopup.popupVisible = false;
    },
    handleBack() {
      if (this.$refs.StoreChoice && this.$refs.StoreChoice.popupVisible) {
        this.$refs.StoreChoice.back();
      } else {
        if (String(this.$route.query.close) == 'true') {
          jsBridge.closeWindow();
        } else {
          this.$router.back();
        }
      }
    },
    rightCallBack() {
      this.chooseShopTo();
    },
    getSelectStoreValue(value, storeName) {
      const shopId = value[0].selectKey;
      this.mtSearchParam.shopName = storeName;
      this.mtSearchParam.shopId = shopId;
      this.loadData(1);
    },
    chooseShopTo() {
      //显示选择门店
      this.$refs.StoreChoice.popupShow();
    },
    loadData(page) {
      this.loading = true;
      let mtParams = {};
      mtParams.pageSize = this.mtSearchParam.pageSize;
      mtParams.currentPage = page;
      mtParams.shopName = this.mtSearchParam.shopName;
      mtParams.shopId = this.roleInfo.manyShopFlag ? this.mtSearchParam.shopId:this.selfShopId;
      if (this.mtSearchParam.shopId && mtParams.shopName == "全部门店") {
        mtParams.shopId = "";
      }
      if (mtParams.currentPage == 1) {
        this.list = [];
      }
      var url = "newapp/machineTool/getMachineToolList.do?currentPage=" + mtParams.currentPage + "&pageSize=" + mtParams.pageSize + "&shopId=" + mtParams.shopId;
      this.ajax({
        url: url,
        type: "get",
        //data: mtParams,
        controlLoading: false
      })
        .then(res => {
          if (res.success) {
            var data = res.resultObject;
            //最后一页将noMore设置为true
            if (data != null && JSON.stringify(data) != "{}") {
              let tempList = this.mapDeviceInfo(data.list);
              this.list = this.list.concat(tempList);
              if (data.nextPage > page) {
                this.nextPage = data.nextPage;
              } else {
                this.noMore = true;
              }
            } else {
              this.noMore = true;
            }
          } else {
            this.noMore = true;
            Toast(res.msg);
          }
          this.loading = false;
        })
        .catch(err => {
          this.loading = false;
          this.noMore = true;
        });
    },
    // 找到对应设备信息
    mapDeviceInfo(list) {
      for (let i = 0; i < list.length; i++) {
        const e = list[i];
        if (e.thumbnail == undefined && e.machineToolName == undefined) {
          for (let j = 0; j < this.deviceInfo.length; j++) {
            const item = this.deviceInfo[j];
            if (e.machineToolType == item.machineType) {
              if (item.thumbnail == undefined) {
                e.thumbnail = './static/images/machines/defaultMachine.png';
              }
              else {
                e.thumbnail = config.shopImgUrlPrefix + item.thumbnail;
              }
              if (item.machineToolName == undefined) {
                e.machineToolName = '未知机具类型';
              }
              else {
                e.machineToolName = item.machineToolName;
              }
            }
          }
        }
      }
      return list;
    },
    //无限加载
    loadMore() {
      if (this.loading || this.noMore || !this.role) {
        return;
      }
      var nextPage = this.nextPage;
      if (!nextPage) {
        return;
      }
      this.loadData(nextPage);
    },
    //设备图
    devicePic(machineType) {
      let img = "./static/images/machines/defaultMachine.png";
      for (const e of this.deviceInfo) {
        if (e.machineType == machineType&&e.thumbnail){
          img = config.shopImgUrlPrefix + e.thumbnail;
          break;
        }
      }
      return img;

      //return "./static/images/machines/"+window.CommonUtil.devicePic(machineType);
    },
    //机具状态
    statusFormate(status) {
      let v = "";
      if (status == 2) {
        v = "待绑定";
      } else if (status == 3) {
        v = "待发货";
      } else if (status == 4) {
        v = "可使用";
      }
      return v;
    }
  },
  created() {
    CommonUtil.getUserInfo().then(userInfo => {
      this.role = userInfo.role;
      this.roleInfo = userInfo;
      this.selfShopId = userInfo.yzShopId;
      this.supplierId = userInfo.yzSupplierId;
      CommonUtil.getDeviceInfo().then(data => {
        this.deviceInfo = data;
        this.loadData(1);
      });
    });

  },
  components: {
    customHeader,
    noData,
    StoreChoice,
    machinesDetailPopup
  }
};
</script>
<style lang='scss' scoped>
@import "machinesManage";
</style>
